<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>🔥Fire Notebook🔥</title>
    <style></style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="./lib/font-awesome.css" />

    <link rel="stylesheet" href="./lib/vditor.css" />

    <link rel="stylesheet" href="front/ui/toolbar.css" />
    <link rel="stylesheet" href="front/ui/sign.css" />
    <link rel="stylesheet" href="front/ui/index.css" />


    <script src="./lib/vditor.js"></script>
    <script src="front/ui/api.js"></script>

    <script src="./front/config.js"></script>

    <script src="front/canvas/utils.js"></script>

    <script src="front/canvas/canvas_obj.js"></script>

    <script src="front/canvas/background.js"></script>

    <script src="front/canvas/stroke_style.js"></script>
    <script src="front/canvas/stroke_point.js"></script>
    <script src="front/canvas/stroke.js"></script>
    <script src="front/canvas/picture.js"></script>
    <script src="front/canvas/markdown.js"></script>

    <script src="front/canvas/canvas.js"></script>
    <script src="front/canvas/pen.js"></script>
    
    <script src="front/canvas/find.js"></script>

    <script src="front/ui/info.js"></script>
    <script src="front/ui/sign.js"></script>

    <script src="front/ui/file.js"></script>
    <script src="front/ui/rightmenu.js"></script>

    <script src="front/ui/toolbar.js"></script>
    <script src="front/ui/tree.js"></script>

    <script src="front/index.js"></script>
</head>

<body>
    <div class="toolbar">
        <button id="tree-btn" class="btn btn-toolbar" title="Tree">
            <i class="fas fa-sitemap"></i></button>
        <div class="tree-panel" id="tree-panel">
            <div class="button-container">
                <button class="logout-btn btn btn-small" title="Logout">
                    <i class="fas fa-sign-out-alt"></i></button>
                <button class="download-btn btn btn-small" title="Download">
                    <i class="fas fa-download"></i></button>
                <button class="return-btn btn btn-small" title="Return to Root">
                    <i class="fas fa-home"></i></button>
            </div>
            <div id="file-info"></div>
            <div id="tree-content"></div>
        </div>
        <button id="save-btn" class="btn btn-toolbar" title="Save">
            <i class="fas fa-save"></i>
        </button>
        <div class="dropdown" id="mode-dropdown">
            <div onclick="notebook.toolbar.events.set_mode('page')">
                <i class="fas fa-file"></i> Page Mode
            </div>
            <div onclick="notebook.toolbar.events.set_mode('board')">
                <i class="fas fa-folder-open"></i> Board Mode
            </div>
            <div onclick="notebook.toolbar.events.set_mode('document')">
                <i class="fas fa-save"></i> Document Mode
            </div>
        </div>
        <div class="divider"></div>

        <button id="setscale-btn" class="btn btn-toolbar" data-brush="setscale" title="Set Scale">
            <i class="fas fa-expand"></i>
        </button>

        <button id="find-btn" class="btn btn-toolbar" data-brush="find" title="Find">
            <i class="fas fa-search"></i>
        </button>
        <div class="config-panel" id="find-config">
            Find:
            <div class="input-container">
                <input type="text" id="find-input" placeholder="Enter text to find..." />
            </div>
            <div class="find-results-info" id="find-results-info">Search Results: 0/0</div>
            <div class="find-navigation">
                <button id="find-prev-btn" class="btn btn-small" title="Previous Result">
                    <i class="fas fa-chevron-up"></i>
                </button>
                <button id="find-next-btn" class="btn btn-small" title="Next Result">
                    <i class="fas fa-chevron-down"></i>
                </button>
            </div>
        </div>
        <div class="divider"></div>
        <button class="brush btn btn-toolbar" data-brush="1" title="Brush 1">
            <span class="brush-preview"></span>
        </button>
        <div class="config-panel" id="brush-config-1">
            Brush 1:</br>
            <canvas class="color-wheel" data-brush="1"></canvas>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="1" id="brush-size-1" min="1" max="10" value="5" />
                <span class="slider-label" id="brush-size-label-1">Width: 5</span>
            </div>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="1" id="lightness-1" min="0" max="100" value="50" />
                <span class="slider-label" id="lightness-label-1">Lightness: 50</span>
            </div>
        </div>
        <button class="brush btn btn-toolbar" data-brush="2" title="Brush 2">
            <span class="brush-preview"></span>
        </button>
        <div class="config-panel" id="brush-config-2">
            Brush 2:</br>
            <canvas class="color-wheel" data-brush="2"></canvas>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="2" id="brush-size-2" min="1" max="10" value="5" />
                <span class="slider-label" id="brush-size-label-2">Width: 5</span>
            </div>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="2" id="lightness-2" min="0" max="100" value="50" />
                <span class="slider-label" id="lightness-label-2">Lightness: 50</span>
            </div>
        </div>
        <button class="brush btn btn-toolbar" data-brush="3" title="Brush 3">
            <span class="brush-preview"></span>
        </button>
        <div class="config-panel" id="brush-config-3">
            Brush 3:</br>
            <canvas class="color-wheel" data-brush="3"></canvas>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="3" id="brush-size-3" min="1" max="10" value="5" />
                <span class="slider-label" id="brush-size-label-3">Width: 5</span>
            </div>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="3" id="lightness-3" min="0" max="100" value="50" />
                <span class="slider-label" id="lightness-label-3">Lightness: 50</span>
            </div>
        </div>
        <button class="brush btn btn-toolbar" data-brush="4" title="Brush 4">
            <span class="brush-preview"></span>
        </button>
        <div class="config-panel" id="brush-config-4">
            Brush 4:</br>
            <canvas class="color-wheel" data-brush="4"></canvas>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="4" id="brush-size-4" min="1" max="10" value="5" />
                <span class="slider-label" id="brush-size-label-4">Width: 5</span>
            </div>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="4" id="lightness-4" min="0" max="100" value="50" />
                <span class="slider-label" id="lightness-label-4">Lightness: 50</span>
            </div>
        </div>
        <button class="brush btn btn-toolbar" data-brush="5" title="Brush 5">
            <span class="brush-preview"></span>
        </button>
        <div class="config-panel" id="brush-config-5">
            Brush 5:</br>
            <canvas class="color-wheel" data-brush="5"></canvas>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="5" id="brush-size-5" min="1" max="10" value="5" />
                <span class="slider-label" id="brush-size-label-5">Width: 5</span>
            </div>
            <div class="slider-container">
                <input type="range" class="slider" data-brush="5" id="lightness-5" min="0" max="100" value="50" />
                <span class="slider-label" id="lightness-label-5">Lightness: 50</span>
            </div>
        </div>
        <button id="eraser-btn" class="btn btn-toolbar" data-brush="eraser" title="Eraser">
            <i class="fas fa-eraser"></i>
        </button>
        <div class="config-panel" id="eraser-config">
            Eraser:
            <div class="slider-container">
                <input type="range" class="slider" id="eraser-size" min="1" max="10" value="5" />
                <span class="slider-label" id="eraser-size-label">Width: 5</span>
            </div>
            <div class="checkbox-container">
                <label class="checkbox-label">
                    <input type="checkbox" id="eraser-stroke" checked />
                    <span>Stroke</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="eraser-picture" checked />
                    <span>Picture</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="eraser-markdown" checked />
                    <span>Markdown</span>
                </label>
            </div>
        </div>
        <button id="background-btn" class="btn btn-toolbar" data-brush="background" title="Background">
            <i class="fas fa-gear"></i>
        </button>
        <div class="config-panel" id="background-config">
            Background:
            <canvas class="color-wheel" id="background-color-wheel"></canvas>
            <div class="slider-container">
                <input type="range" class="slider" id="background-lightness" min="0" max="100" value="50" />
                <span class="slider-label" id="background-lightness-label">Lightness: 50</span>
            </div>
            <div class="slider-container">
                <select id="background-type" class="slider select">
                    <option value="empty">Empty</option>
                    <option value="line">Line</option>
                    <option value="grid">Grid</option>
                    <option value="dot">Dot</option>
                </select>
            </div>
        </div>
        <button id="lasso-btn" class="btn btn-toolbar" data-brush="lasso" title="Lasso">
            <i class="fas fa-draw-polygon"></i>
        </button>
        <div class="divider"></div>
        <button id="image-btn" class="btn btn-toolbar" data-brush="image" title="Insert Image">
            <i class="fas fa-image"></i>
        </button>
        <button id="markdown-btn" class="btn btn-toolbar" data-brush="markdown" title="Insert Markdown">
            <i class="fas fa-code"></i>
        </button>
    </div>
</body>

</html>